<template>
  <div class="check">
    <span class="check__title">{{ title }}：</span>
    <select v-model="option">
      <option value="">全部</option>
      <option
        :value="option"
        v-for="(option, index) in options"
        :key="index"
      >
        {{ option }}
      </option>
    </select>
    
  </div>
</template>
<script>
import { ref,watch} from "vue";
export default {
  props: ["title", "options"],
  emits:['changeValue'],
  setup(props,context) {
    const option=ref('')
    watch(option,() => {
    context.emit('changeValue',props.title,option.value)
    })
   return {option}
  },
};
</script>
<style lang="scss" scoped>
.check {
  display: inline-block;
  &__title {
    font-size: 1.6rem;
  }
  select{
    cursor: pointer;
    width: 11.2rem;
  }
  select:hover{
    font-weight: bold;
  }
}
</style>